import {
  Divider,
  Breadcrumb,
  Input,
  Button,
  Form,
  Select,
  Table,
} from 'antd';

import React from 'react';
import { Link } from 'react-router-dom';
import {getCheckListApi} from '../../services/checkService'
const { Option } = Select
const columns = [
  {
    title: '菜名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '图片',
    key: 'img',
    dataIndex: 'img',
  },
  {
    title: '简介',
    dataIndex: 'intro',
    key: 'intro',
  },
  {
    title:'操作',
    dataIndex: 'action',
    key:'action',
    render: () => (
      <><Button type="primary" >修改</Button>
        <Button type="primary" danger style={{marginLeft:'10px'}}>删除</Button>
      </>
  ),
  }
];
const data = [
  {
    key: '1',
    name: 'John Brown',
    type: 32,
    price: 'New York No. 1 Lake Park',
    img: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    type: 42,
    price: 'London No. 1 Lake Park',
    img: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    type: 32,
    price: 'Sidney No. 1 Lake Park',
    img: ['cool', 'teacher'],
  },
];

const Check = () => {

  return (
    <div style={{ width: '100%' }}>
      <div>
        <Breadcrumb>
          <Breadcrumb.Item>菜品列表</Breadcrumb.Item>
        </Breadcrumb>
        <Divider />
      </div>
      <Form layout="inline">
        <Form.Item label="菜名">
          <Input placeholder="输入搜索的用户名" />
        </Form.Item>
        <Form.Item label="类型">
          <Select
            owSearch
            style={{ width: 200 }}
            placeholder="请选择类型"
          >
            <Option value="热菜">热菜</Option>
            <Option value="凉菜">凉菜</Option>
            <Option value="饮品">饮品</Option>
          </Select>
        </Form.Item>

        <Button type="primary" size="middle" >搜索</Button>
      </Form>
      <div style={{marginTop:'30px'}} >
      <Table columns={columns} dataSource={data} />
      </div>
         
    </div>
  );
}

export default Check;